<template>
  <div class="certificate">
    <div v-if="show">
      <z-container class="certificate-title">
        <title-tpl :value="details.ordername"></title-tpl>
      </z-container>
      <div class="result-hint">{{registerState}}</div>
      <z-container class="certificate-main" v-if="visible">
        <div class="certificate-header">
          <title-tpl value="报名信息" :visible="false"></title-tpl>
        </div>
        <div class="certificate-content">
          <desc-tpl
            v-for="(item,index) in componentlist"
            :key="index"
            :label="item.componentlabel"
            :value="item.componentvalue"
          ></desc-tpl>
        </div>
      </z-container>
      <z-container class="certificate-main">
        <div class="certificate-header">
          <title-tpl value="订单信息" :visible="false"></title-tpl>
        </div>
        <div class="certificate-content">
          <desc-tpl label="交易金额" fashion="normal" :value="details.totalamt | formatTotalamt"></desc-tpl>
          <desc-tpl label="订单号" fashion="normal" :value="details.orderno"></desc-tpl>
          <desc-tpl label="交易时间" fashion="normal" :value="details.newPayTime"></desc-tpl>
          <desc-tpl label="交易状态" fashion="normal" :value="details.orderstatus | formatPayFlag"></desc-tpl>
        </div>
      </z-container>
    </div>
  </div>
</template>
<script>
import TitleTpl from '@/components/titleTpl';
import ZContainer from '@/components/zcontainer';
import DescTpl from '@/components/desc';
export default {
  name: 'certificate',
  components: { TitleTpl, ZContainer, DescTpl },
  data() {
    return {
      details: { ordername: '', componentlist: [] },
      show: false,
      componentlist: [{ componentlabel: '姓名', componentvalue: '小明' }, { componentlabel: '年龄', componentvalue: "16" }]
    }
  },
  computed: {
    registerState() {
      return this.details.orderstatus == '2' ? '报名成功' : '未报名'
    },
    visible() {
      if (!this.componentlist || this.componentlist.length <= 0) return false;
      let state = this.componentlist.map((val) => {
        return val.componentvalue
      }).reduce((curr, next) => {
        if (!!curr || next !== null) {
          return true
        } else {
          return false
        }
      })
      return state
    }
  },
  activated() {
    document.title = '报名凭证'
    this.show = false;
    this.t = this.$toast.loading({ duration: 0 });
    this._getData();
  },
  methods: {
    async _getData() {
      let res = await this.$http.getPayOrderDetail({
        orderNo: this.$route.query.orderno
      })
      this.details = res;
      if (res.payorderlist && res.payorderlist.length > 0) {
        this.componentlist = res.payorderlist[0].componentlist;
      }
      this.show = true;
      this.t.clear();
    }
  }
}
</script>
<style lang="less" scoped>
@import url("../assets/less/base.less");
.certificate {
  width: 100%;
  height: 100%;
  padding: 0.24rem;
  .certificate-title {
    position: relative;
  }
  .result-hint {
    width: 6.44rem;
    height: 1.6rem;
    background: linear-gradient(
      225deg,
      rgba(255, 161, 92, 1) 0%,
      rgba(255, 125, 61, 1) 100%
    );
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.4rem;
    text-align: center;
    line-height: 1.6rem;
    margin: -0.56rem auto 0.24rem;
  }
  .certificate-main {
    padding: 0;
    .certificate-header {
      padding: 0.28rem;
      position: relative;
      &::after {
        .after;
      }
    }
    .certificate-content {
      padding: 0.28rem 0.28rem 1px;
    }
  }
}
</style>
